﻿<template>
  <div v-if = 'formItemConfig && Object.keys(formItemConfig).length'>
    <div class = 'bi_data_item'>
      <p class = 'bi_data_item_label'>选择数据集</p>
      <el-select placeholder = '请选择数据源' filterable
      @change = 'currentSetChange' v-model = 'formItemConfig.dataSet'>
        <el-option v-for = "(item, index) in setList" :key = 'index'
        :label = 'item.title' :value = 'item.uid'
        ></el-option>
      </el-select>
    </div>
    <div class = 'bi_data_item' v-if = "formItemConfig.type === 'table'">
      <p class = 'bi_data_item_label'>设置表格栏位信息</p>
      <el-table :data = 'formItemConfig.tableColumn' style="width:100%" empty-text="暂无表格栏位数据，请添加" border stripe>
        <el-table-column align = "center" prop = 'text' label = '表头名称'>
          <template slot-scope = "scope">
            <el-input v-model = "scope.row.text" placeholder = '请输入'></el-input>
          </template>
        </el-table-column>
        <el-table-column align = "center" prop = 'indexName' label = '表头键名'>
          <template slot-scope = "scope">
            <span>{{scope.row.indexName}}</span>
          </template>
        </el-table-column>
        <el-table-column align = "center" prop = 'sortNum' label = '排序'>
          <template slot-scope = "scope">
            <el-input v-model = "scope.row.sortNum" placeholder = '请输入'></el-input>
          </template>
        </el-table-column>
        <el-table-column align = "center" prop = 'isShow' label = '是否展示在表格'>
          <template slot-scope = "scope">
            <el-switch v-model = "scope.row.isShow"></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class = 'bi_data_item' v-if = "formItemConfig.type.indexOf('echarts_') !== -1">
      <p class = 'bi_data_item_label'>选择维度</p>
      <el-select placeholder = '请选择维度' filterable
      @change = 'dimensionChange' v-model = 'formItemConfig.dimension'>
        <el-option v-for = "(item, index) in dimensionList" :key = 'index'
        :label = 'item.key' :value = 'item.key'
        ></el-option>
      </el-select>
    </div>
    <div class = 'bi_data_item' v-if = "formItemConfig.type === 'echarts_pie'">
      <p class = 'bi_data_item_label'>选择量度</p>
      <el-select placeholder = '请选择量度' filterable
      @change = 'measurementChange_pie' v-model = 'formItemConfig.measurement'>
        <el-option v-for = "(item, index) in measurementList" :key = 'index'
        :label = 'item.key' :value = 'item.key'
        ></el-option>
      </el-select>
    </div>
    <div class = 'bi_data_item' v-if = "formItemConfig.type === 'echarts_bar' || formItemConfig.type === 'echarts_line'">
      <p class = 'bi_data_item_label'>选择量度</p>
      <el-select placeholder = '请选择量度' filterable multiple collapse-tags
      @change = 'measurementChange' v-model = 'formItemConfig.measurement'>
        <el-option v-for = "(item, index) in measurementList" :key = 'index'
        :label = 'item.key' :value = 'item.key'
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script src = './biData.js'></script>

<style lang = "scss" scoped>
.bi_data_item {
  width: 100%;
  margin-bottom: 10px;
  .bi_data_item_label {
    font-size: 14px;
  }
}
</style>
